<template>
  <div class="addCarType">

    <!-- Form -->
    <el-dialog width="600px" :visible="true" :before-close="cancelBtn" :close-on-click-modal="false">
      <div slot="title">
        <div class="addTitle">{{ title }}</div>
      </div>
      <el-form :model="form" label-position="top" :label-width="formLabelWidth" v-if="state!='info'">
        <el-form-item label="路由类型:" >
          <el-radio-group v-model="form.type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">页面</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称:" >
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="路由名称:" >
          <el-input v-model="form.router_name" autocomplete="off" placeholder="请输入路由名称"></el-input>
        </el-form-item>
        <el-form-item label="按钮标识:" v-if="form.type==3">
          <el-input v-model="form.identify" autocomplete="off" placeholder="请输入按钮标识"></el-input>
        </el-form-item>
        <el-form-item label="父级路由:" >
          <el-select v-model="form.parent" placeholder="选择收费类型" clearable>
            <el-option v-for="(item,index) in classList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="序号" >
          <el-input v-model="form.sequence" type="number" autocomplete="off" placeholder="请输入序号"></el-input>
        </el-form-item>
        <el-form-item label="状态" >
          <el-switch
            v-model="form.status"
          >
          </el-switch>
        </el-form-item>



      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {routerAdd, routerEdit,routerParents} from "@/api"
import EditorBar from "@/components/wangEditor";
export default {
  name: "addClass",
  components: {
    EditorBar
  },
  props:['item','state','closeAlert'],
  data(){
    return{
      form: {
        name:"",
        router_name:'',
        identify:'',
        parent:'',
        sequence:'',
        type:1,
        icon:'',
        status:true
      },
      formLabelWidth: '120px',
      title: '',
      classList:[]
    }
  },
  mounted() {
    console.log(this.state)
    this.getclassList()
    if(this.state == 'edit'){
      this.info()
      this.title = '编辑'
    }else if(this.state == 'add'){
      this.title = '新增'
    }else if(this.state == 'subordinate'){
      this.title = '新增下级'
      this.form.parent=this.item.id
    }
  },
  methods:{
    // 详情
    async info(){
      this.form = this.item
      console.log(this.form)
    },
    // 确认
    async confirm(){
      if(this.state == 'add'||this.state == 'subordinate'){
        // 添加
        this.handleConvenientSave();
      }else{
        // 修改
        this.handleConvenientEdit()
      }

    },
    async handleConvenientSave(){
      console.log(this.form)
      // return
      await routerAdd(this.form).then(res=>{
        if (res.code==10000){
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.cancelBtn();
        }
      })
    },
    async handleConvenientEdit(){
      await routerEdit(this.form).then(res=>{
        if (res.code==10000){
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.cancelBtn();
        }
      })
    },
    getclassList(){
      routerParents({}).then(res=>{
        if(res.code==10000){
          this.classList = res.data
        }
      })
    },
    // 关闭弹窗
    cancelBtn(){
      this.$emit('closeAlert',false)
    }
  }
}
</script>

<style scoped lang="less">
.addTitle{
  font-size: 28px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
}
/deep/.el-dialog__header,
/deep/.el-dialog__body,
/deep/.el-dialog__footer{
  padding-left: 45px;
  padding-right: 45px;
}
/deep/.el-form-item__label{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
///deep/.el-form-item__content input{
//  border: none;
//  background: #F4F4F4;
//  border-radius: 10px;
//}
.el-select{
  width: 100%;
}

</style>

